<script setup lang="ts">
import { patientOrderLogistics } from '@/api/order'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import type { patientOrderLogisticsApi } from '@/types/order'
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted } from 'vue'
import startIcon from '@/assets/start.png'
import endIcon from '@/assets/end.png'
import carIcon from '@/assets/car.png'
const route = useRoute()
const info = ref<patientOrderLogisticsApi>()
const getData = async () => {
  const res = await patientOrderLogistics(route.params.id as string)
  info.value = res.data
  console.log('物流详情', res)
}

/*
高德地图使用：
1：页面准备  div  id='xxx'  有宽度与高度
2：引入高德地图插件(script与import(需要安装))  import AMapLoader from '@amap/amap-jsapi-loader';
3：在window下使用code(密钥)
4: 插件初始化代码（key与版本）
5：创建地图对象
        const map = new AMap.Map('xxx', {
            viewMode: '2D',  // 默认使用 2D 模式  3D
            zoom:11,  //初始化地图层级
            center: [116.397428, 39.90923]  //初始化地图中心点
          });
*/
// interface申明的window
window._AMapSecurityConfig = {
  securityJsCode: '2ab045153d7d70af78a6d809ee228fb4'
}
onMounted(async () => {
  await getData()
  const AMap = await AMapLoader.load({
    key: '3386b0052e924b9ca0376a236c52ac0d', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
  // 中心点位置
  const center = [
    info.value?.currentLocationInfo.longitude,
    info.value?.currentLocationInfo.latitude
  ]
  // JS API加载完成后获取AMap对象
  const map = new AMap.Map('map', {
    viewMode: '2D', // 默认使用 2D 模式  3D
    zoom: 11, //初始化地图层级
    center: center //初始化地图中心点
  })

  // 路线规划
  AMap.plugin('AMap.Driving', function () {
    var driving = new AMap.Driving({
      map: map, // 路线规划应用到哪个地图上
      // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      policy: AMap.DrivingPolicy.LEAST_TIME,
      showTraffic: false,
      hideMarkers: true
    })

    var startLngLat = [
      info.value?.logisticsInfo[0].longitude,
      info.value?.logisticsInfo[0].latitude
    ]
    const len = info.value!.logisticsInfo.length - 1
    var endLngLat = [
      info.value?.logisticsInfo[len].longitude,
      info.value?.logisticsInfo[len].latitude
    ]
    // 途经点
    const opts = {
      waypoints: info.value?.logisticsInfo
        .slice(1, len)
        .map(item => [item.longitude, item.latitude])
    }

    // 添加标记点
    const marker = new AMap.Marker({
      position: startLngLat,
      offset: new AMap.Pixel(-12.5, -30),
      icon: startIcon // 添加 Icon 图标 URL
    })

    map.add(marker)
    const marker2 = new AMap.Marker({
      position: endLngLat,
      offset: new AMap.Pixel(-12.5, -30),
      icon: endIcon // 添加 Icon 图标 URL
    })

    map.add(marker2)

    const marker3 = new AMap.Marker({
      position: center,
      offset: new AMap.Pixel(-25, -30),
      icon: carIcon // 添加 Icon 图标 URL
    })

    map.add(marker3)

    driving.search(startLngLat, endLngLat, opts, function (status: string) {
      // 未出错时，result即是对应的路线规划方案
      console.log('status', status)
      if (status === 'complete') {
        setTimeout(() => {
          map.setZoomAndCenter(14, center)
        }, 3000)
      }
    })
  })
})
</script>

<template>
  <div class="order-logistics-page">
    <div id="map">
      <div class="title">
        <van-icon name="arrow-left" @click="$router.back()" />
        <span>配送中</span>
        <van-icon name="service" />
      </div>
      <div class="current">
        <p class="status">订单派送中 预计{{ info?.estimatedTime }}送达</p>
        <p class="predict">
          <span>{{ info?.name }}</span>
          <span>{{ info?.awbNo }}</span>
        </p>
      </div>
    </div>
    <div class="logistics">
      <p class="title">物流详情</p>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="i in info?.list" :key="i.id">
          <p class="status">{{ i.statusValue }}</p>
          <p class="content">{{ i.content }}</p>
          <p class="time">{{ i.createTime }}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.order-logistics-page {
  --van-step-icon-size: 18px;
  --van-step-circle-size: 10px;
}
#map {
  height: 450px;
  background-color: var(--cp-bg);
  overflow: hidden;
  position: relative;
  .title {
    background-color: #fff;
    height: 46px;
    width: 355px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 16px;
    position: absolute;
    left: 10px;
    top: 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    > span {
      flex: 1;
      text-align: center;
    }
    .van-icon {
      font-size: 18px;
      color: #666;
      &:last-child {
        color: var(--cp-primary);
      }
    }
  }
  .current {
    height: 80px;
    border-radius: 4px;
    background-color: #fff;
    height: 80px;
    width: 355px;
    box-sizing: border-box;
    padding: 15px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);
    z-index: 999;
    .status {
      font-size: 15px;
      line-height: 26px;
    }
    .predict {
      color: var(--cp-tip);
      font-size: 13px;
      margin-top: 5px;
      > span {
        padding-right: 10px;
      }
    }
  }
}
.logistics {
  padding: 0 10px 20px;
  .title {
    font-size: 16px;
    padding: 15px 5px 5px;
  }
  .van-steps {
    :deep(.van-step) {
      &::after {
        display: none;
      }
    }
    .status {
      font-size: 15px;
      color: var(--cp-text3);
      margin-bottom: 4px;
    }
    .content {
      font-size: 13px;
      color: var(--cp-tip);
      margin-bottom: 4px;
    }
    .time {
      font-size: 13px;
      color: var(--cp-tag);
    }
  }
}
</style>
